import BaseComponent from "../../pages/BaseComponent";
import './index.less';
import {View} from "@tarojs/components";
import LogService from "../../service/LogService";
import Switch from "../base/Switch";
import ModalMask from "../TimeChoseModal/ModalMask";
import TimeDelayChoseModal from "../TimeChoseModal/TimeDelayChoseModal";
import {observable} from "mobx";
import {observer} from "mobx-react";

@observer
export default class DSTime extends BaseComponent {

  @observable mClose = "00";
  @observable showChoseDelayTime = false;
  @observable checked = false;

  onComfire = (choseMC) => {
    this.showChoseDelayTime = false;
    this.mClose = choseMC;
    LogService.debug("onComfire", choseMC);

    const {onChange} = this.props;
    if (!!onChange)
      onChange(this.checked, this.mClose);
  }

  onChange = ()=>{
    this.checked = !this.checked;
    LogService.debug("Switch onChange", this.checked);

    const {onChange} = this.props;
    if (!!onChange)
      onChange(this.checked, this.mClose);
  }

  render() {

    const modalProps = {
      choseM: this.mClose,
    };

    const {disabled} = this.props;
    const switchProps = {
      checked: this.checked && !disabled, disabled: disabled
    };
    const checked = this.checked && !disabled;

    return (
      <View className='dsview'>
        <View className='ds_top_view'>
          <View className={checked?'ds_top_img.o':'ds_top_img'}>
          </View>
          <View className='ds_top_switch'>
            <Switch {...switchProps} className='switch' mStyle='transform: scale(.7)'
                    onChange={this.onChange}
            />
          </View>
        </View>

        <View className={checked?'time_title.o':'time_title'}>延时关机</View>
        <View className='ds_end_time_view' onClick={() => {
            this.showChoseDelayTime = true;
            LogService.debug("showChoseDelayTime", this.showChoseDelayTime);
        }}>
          <View className='end_time_set'>{`${this.mClose}分钟后`}</View>
          {/*<AtIcon prefixClass='time_set_into' value='chevron-right' size='60' color='#F00'></AtIcon>*/}
          <View className="time_set_into" ></View>
        </View>

        {
          this.showChoseDelayTime && <View>
            <ModalMask onClick={()=>{
              this.showChoseDelayTime = false
              LogService.debug("ModalMask onClick")}
            }/>
            <TimeDelayChoseModal onCancell={() => this.showChoseDelayTime = false}
                                 onComfire={this.onComfire} {...modalProps}/>
          </View>
        }
      </View>
    );
  }
}
